<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件</title>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.common.dev.js"></script>
</head>
<body>
<!--
组件： 组件是可复用的 Vue 实例（对象），且带有一个名字：在这个例子中是 <button-counter>。我们可以在一个通过 new Vue 创建的 Vue 根实例中，
      把这个组件作为自定义元素来使用

      因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等

      data 必须是一个函数,一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝

      Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性

-->
<div id="components-demo">
    <button-counter></button-counter>
    <button-counter></button-counter>
    <button-counter></button-counter>
    <br/>
    <blog-post title="My journey with vue"></blog-post>

    <blog-posts v-for="(post, index) in posts" :key="post.id" :post="post"></blog-posts>
</div>
    <script>
        //自定义组件
        //组件对象
        let buttonCounter =  {
            data: function () {
                return {
                    count: 0
                }
            },
            template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
        };
        //全局注册为<button-counter/>标签
        Vue.component('button-counter', buttonCounter);

        //自定义组件
        Vue.component('blog-post', {
            props: ['title'], //组件属性
            template: '<h3>{{title}}</h3>' // 使用组件属性的值
        });
        //自定义组件
        Vue.component('blog-posts', {
            props: ['post'], //组件属性
            template :'<div><h3>{{post.title}}</h3><p v-html="post.content"></p></div>'
        });

        new Vue({
            el: '#components-demo',
            data:{
                posts: [
                    { id: 1, title: 'My journey with Vue', content: 'content1' },
                    { id: 2, title: 'Blogging with Vue', content: 'content1' },
                    { id: 3, title: 'Why Vue is so fun', content: 'content1' }
                    ]
            }
        });
    </script>
</body>
</html>
